﻿<template>
    <div id="app" :style="{ backgroundColor: bgColor, fontSize: curFontSize, fontWeight: 700, color: 'white' }"
        :class="bgAniClass">
        <!-- <marquee
        scrollamount="1"
            style="height: 100%;width: 100%;display: flex;flex-direction: column;color: #fff;position: absolute;z-index: 10;"> -->
        <div :style="{width: '99%',height: '100%',display: 'flex'}">
            <div
                style="flex: 1;display: flex;flex-direction: column;align-items: center;height: 100%;justify-content:space-around;">
                <div :style="{transform:fontTransform}">{{ suffix }}</div>
                <div :style="{transform:fontTransform}">{{ curTime }}
                </div>
                <div :style="{transform:fontTransform}">
                    {{ realTide }}</div>
                <div :style="{transform:fontTransform}">CM</div>
            </div>
            <div
                style="flex: 1;display: flex;flex-direction: column;align-items: center;height: 100%;justify-content:space-around;">
                <div :style="{transform:fontTransform}">{{ suffix }}</div>
                <div :style="{transform:fontTransform}">{{ curTime }}
                </div>
                <div :style="{transform:fontTransform}">
                    {{ realTide }}</div>
                <div :style="{transform:fontTransform}">CM</div>
            </div>
            <div
                style="flex: 1;display: flex;flex-direction: column;align-items: center;height: 100%;justify-content:space-around;">
                <div :style="{transform:fontTransform}">{{ suffix }}</div>
                <div :style="{transform:fontTransform}">{{ curTime }}
                </div>
                <div :style="{transform:fontTransform}">
                    {{ realTide }}</div>
                <div :style="{transform:fontTransform}">CM</div>
            </div>
            <div
                style="flex: 1;display: flex;flex-direction: column;align-items: center;height: 100%;justify-content:space-around;">
                <div :style="{transform:fontTransform}">{{ suffix }}</div>
                <div :style="{transform:fontTransform}">{{ curTime }}
                </div>
                <div :style="{transform:fontTransform}">
                    {{ realTide }}</div>
                <div :style="{transform:fontTransform}">CM</div>
            </div>
        </div>


        <!-- </marquee> -->

        <div v-if="showWave" :style="{
        height: tide,
        width: '100%',
        position: 'absolute',
        bottom: tideBottom,
        left: '0',
        background: seaColor
    }" :class="waveFaClass" id="waveFather">
            <div :class="waveClass"></div>
            <div :class="waveClass"></div>
        </div>
    </div>
</template>

<style>
#app {
    width: 78px;
    height: 128px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    /* flex-direction: column; */
    overflow: hidden;
    font-size: 130px;
    /* background-color: aqua; */
    /* background-color: aqua; */
}


.waveFloat {
    background: url(../assets/floatTide.svg) repeat-x;
    position: absolute;
    top: -145px;
    width: 6400px;
    height: 198px;
    -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}



.waveFloat:nth-of-type(2) {
    top: -155px;
    left: -550px;
    -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}


.waveDown {
    background: url(../assets/downTide.svg) repeat-x;
    position: absolute;
    top: -145px;
    width: 6400px;
    height: 198px;
    -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}



.waveDown:nth-of-type(2) {
    top: -155px;
    left: -550px;
    -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}

.waveUp {
    background: url(../assets/upTide.svg) repeat-x;
    position: absolute;
    top: -145px;
    width: 6400px;
    height: 198px;
    -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}

.waveUp:nth-of-type(2) {
    top: -155px;
    left: -550px;
    -webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}


@-webkit-keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@-webkit-keyframes swell {

    0%,
    100% {
        transform: translate3d(0, -25px, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }
}

@keyframes swell {

    0%,
    100% {
        transform: translate3d(0, -25px, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }
}

.Anim {
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite showMsg 0.6s;
}

@keyframes showMsg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1
    }


}

.waveUpClass {
    animation: zt 1s forwards;
}

.waveDownClass {
    animation: dt 1s forwards;
}

.KeepUpClass {
    animation: ku 1s forwards;
}

.KeepDownClass {
    animation: kd 1s forwards;
}

.DownToUpClass {
    animation: du 1s forwards;
}

.UpToDownClass {
    animation: ud 1s forwards;
}

.blueBlink {
    animation: bb 2s forwards;
}

.yellowBlink {
    animation: yb 2s forwards;
}

.orangeBlink {
    animation: ob 2s forwards;
}

.redBlink {
    animation: rb 2s forwards;
}


@keyframes rb {

    0%,
    50%,
    100% {
        background-color: red;
    }

    25%,
    75% {
        background-color: black;
    }
}

@keyframes ob {

    0%,
    50%,
    100% {
        background-color: orange;
    }

    25%,
    75% {
        background-color: black;
    }
}

@keyframes yb {

    0%,
    50%,
    100% {
        background-color: yellow;
    }

    25%,
    75% {
        background-color: black;
    }
}

@keyframes bb {

    0%,
    50%,
    100% {
        background-color: blue;
    }

    25%,
    75% {
        background-color: black;
    }
}

@keyframes du {
    0% {
        bottom: -120px;
    }

    100% {
        bottom: -25px;
    }
}

@keyframes ud {
    0% {
        bottom: -25px;
    }

    100% {
        bottom: -120px;
    }
}

@keyframes zt {
    0% {
        bottom: -90px;
    }

    100% {
        bottom: -25px;
    }
}

@keyframes dt {
    0% {
        bottom: -90px;
    }

    100% {
        bottom: -120px;
    }
}

@keyframes ku {
    0% {
        bottom: -25px;
    }

    100% {
        bottom: -90px;
    }
}

@keyframes kd {
    0% {
        bottom: -120px;
    }

    100% {
        bottom: -90px;
    }
}
</style>

<script>
import request from "../axios/request";



export default {
    data() {
        return {
            baseURL: null,
            tide: '0%',
            curTime: null,
            timer: null,
            realTide: '00.00',
            seaColor: '#015871',
            waveClass: 'waveFloat',
            waveFaClass: null,
            preStatus: 3,
            showWave: true,
            bgColor: 'black',
            bgAniClass: null,
            curFontSize: '5px',
            curFontMargin: '20px',
            curFontMarginBottom: '0',
            curTideTopMargin: '15px',
            tideBottom: '-90px',
            fontTransform: 'scale(1, 3)',
            suffix: null
        }
    },
    methods: {
        async getTideHeight() {
            var resOfGettingTideHeight = await request({
                url: "/api/tideReader/getTideHeight",
                method: "GET"
            });
            if (resOfGettingTideHeight!=null && resOfGettingTideHeight.data.status == 200) {

                // console.log("监听到服务器消息");
                let curTide = resOfGettingTideHeight.data.data
                console.log(curTide);
                if (curTide != '连接成功') {
                    if (Number(curTide) >= 4.8) {
                        console.log("满潮");
                        this.preStatus = 4
                        this.showWave = false
                        // this.bgColor = 'red'
                        if (Number(curTide) < 5) {
                            this.bgAniClass = 'blueBlink'
                        } else if (Number(curTide) >= 5 && Number(curTide) < 5.2) {
                            this.bgAniClass = 'yellowBlink'
                        } else if (Number(curTide) >= 5.2 && Number(curTide) < 5.4) {
                            this.bgAniClass = 'orangeBlink'
                        } else if (Number(curTide) >= 5.4) {
                            this.bgAniClass = 'redBlink'
                        }

                    } else {
                        this.bgColor = 'black'
                        this.bgAniClass = null
                        this.showWave = true
                        // console.log(this.realTide);
                        console.log(Number(this.realTide.replace(" CM", "")) + " " + Number(curTide));
                        if (Number(this.realTide.replace(" CM", "")) > Number(curTide)) {
                            this.seaColor = "#2FFF00"
                            this.waveClass = "waveDown"
                            if (this.preStatus == 3) {
                                this.waveFaClass = "waveDownClass"
                            } else if (this.preStatus == 1) {
                                this.waveFaClass = "UpToDownClass"
                            }
                            this.tideBottom = "-120px"
                            this.preStatus = 2
                            console.log("降潮了");
                        } else if (Number(this.realTide.replace(" CM", "")) < Number(curTide)) {
                            this.seaColor = "rgba(255, 14, 0, 1)"
                            this.waveClass = "waveUp"
                            if (this.preStatus == 3) {
                                this.waveFaClass = "waveUpClass"
                            } else if (this.preStatus == 2) {
                                this.waveFaClass = "DownToUpClass"
                            }
                            this.tideBottom = "-25px"
                            this.preStatus = 1
                            console.log("涨潮了");
                        } else {
                            if (this.preStatus == 1) {
                                console.log("涨转平");
                                this.waveFaClass = "KeepUpClass"
                            } else if (this.preStatus == 2) {
                                console.log("降转平");
                                this.waveFaClass = "KeepDownClass"
                            }
                            this.preStatus = 3
                            this.tideBottom = "-90px"
                            // this.waveFaClass = "null"

                        }
                    }

                    this.realTide = curTide
                    // if (curTide < 10) {
                    //     this.realTide = '0' + this.realTide
                    // }

                    if (curTide % 1 == 0 && curTide != 0) {
                        this.realTide = this.realTide + '.00'
                    } else if (curTide % 0.1 == 0) {
                        this.realTide = this.realTide + '0'
                    }
                    this.realTide = this.realTide
                    // curTide = Math.ceil((Number(curTide) / 4.8) * 100) + "%"
                    // this.tide = curTide
                }
            }

        },
    },
    async mounted() {
        // this.curFontSize=localStorage.getItem("fontSize")+'px'
        // this.curTideTopMargin=localStorage.getItem("marginTop")+'px'
        // this.curFontMargin=localStorage.getItem("tideMarginBottom")+'px'
        // this.curFontMarginBottom=localStorage.getItem("timeMarginBottom")+'px'

        var that = this
        this.timer = setInterval(function () {
            var mydate = new Date();
            var hours = mydate.getHours();//时
            var minutes = mydate.getMinutes();//分
            if (hours > 12) {
                hours -= 12;


                that.suffix = "PM";
            } else {
                that.suffix = "AM";
            }
            // if (hours < 10) {
            //     hours = `0${hours}`;
            // }
            if (minutes < 10) {
                minutes = `0${minutes}`;
            }

            that.curTime = `${hours}:${minutes}`

        }, 1000)
        this.baseURL = request.defaults.baseURL;
        setInterval(() => {
            this.getTideHeight()
        }, 5000);
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>